.px2rem(@name,@px){
    @{name}: @px / 75px * 1rem 
}
body{
    background: #f4f4f4;
    
}

.header{
    .px2rem(font-size,30);
    background: white;
    width: 100%;
    .px2rem(height,90);
    box-sizing: border-box;
    padding: 1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
    position: fixed;
    left: 0;
    top: 0;
    border-bottom: 3px solid #f1f1f1;
    ._left{
        width: 86%;
        background: #f7f7f7;
        text-align: center;
        border-radius: 10px;
        .px2rem(font-size,28);
    	.iconfont{
            font-family:"iconfont";
            .px2rem(font-size,40);
            font-style:normal;
            color: #c6c6c6;
            margin-right: 2%;
        }
    }
    ._right{
        width: 10%;
	    	.iconfont{
                font-family:"iconfont";
                .px2rem(font-size,40);
                font-style:normal;
                color: #c6c6c6;
            }
	    }
}
.tab-nav{
    width: 100%;
    .px2rem(font-size,30);
    z-index: 90;
    background: white;
    position: fixed;
    left: 0;
    .px2rem(top,90);
    
    .swiper-slide{
        .px2rem(font-size,30);
        text-align: center;
        .px2rem(line-height,100);
        border-bottom: 1px solid #d9d9d9;
        color: #656563;
    }

    .swiper-slide.active{
        color: red;
        border-bottom: 3px solid red;
    }
    
}
.main{
    z-index: 60;
    .px2rem(margin-top,180);
    .px2rem(margin-bottom,120);
    .px2rem(font-size,16);
    .tab-cont{
        .swiper-wrapper{
            
            .hot_recommend{
                ._top{
                    background: white;
                    width: 100%;
                    padding: 4%;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    p{
                        width: 46%;
                        img{
                            width: 100%;
                        }
                    }
                }
                ._concent{
                    .px2rem(margin-top,40);
                    padding: 4%;
                    box-sizing: border-box;
                    background: white;
                    width: 100%;
                    a{
                        width: 100/3%;
                        padding: 4%;
                        box-sizing: border-box;
                        float: left;
                         
                        img{width: 100%;}
                        
                        p{
                            text-align: center;
                            .px2rem(font-size,26);
                            .px2rem(padding-top,20);
                            color: #1a1d19;
                        }
                    }
                    div{
                        clear: both;
                    }
                }
            }
            .shequ{
                ._top{
                    width: 100%;
                    background: white;
                    padding: 46px 188px;
                    p{
                        text-align: center;
                        background: #73cf94;
                        
                        padding: 8% 0;
                        border-radius: 10px;
                        .px2rem(font-size,28);
                       .iconfont{
                            font-family:"iconfont";
                            .px2rem(font-size,28);
                            font-style:normal;
                            
                        } 
                        a{
                            color: white;
                        }
                    }  
                }
                ._concent{
                    background: white;
                    .px2rem(margin-top,40);
                    p{
                        width: 100%;
                        padding: 4%;
                        .px2rem(font-size,30);
                        span{
                            padding: 1%;
                            color: white;
                            background: #ff964a;
                            .px2rem(font-size,20);
                            .px2rem(margin-right,20);
                        }
                    }
                    dl{
                        margin-left: 100px;
                        border-bottom: 2px solid #f5f4f5;
                        dt{
                            width: 40%;
                            img{
                                width: 100%;
                            }
                        }
                        dd{
                            .px2rem(font-size,32);
                            color: #a8a7a8;
                            .px2rem(padding,20);
                            padding-left:0 ;
                        }
                    }
                }
                
            }
            .attention{
                ._content{
                    width: 60%;
                    margin: 0 auto;
                    border-bottom: 2px solid #f5f4f5;
                    dl{
                        dt{
                            width: 40%;
                            margin: auto;
                            margin-top: 200px;
                            img{
                                width: 100%;
                            }
                        }
                        dd{
                            p:nth-child(1){
                                .px2rem(font-size,34);
                                margin-top: 8%;
                            }
                            p:nth-child(2){
                                width: 80%;
                                margin: 0 auto;
                                .px2rem(font-size,28);
                                color: white;
                                margin-top: 8%;
                                background: #ff5858;
                                .px2rem(height,86);
                                .px2rem(line-height,86);
                                border-radius: 86px;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
} 
.footer{
    z-index: 99;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    .px2rem(height,120);
    border-top: 3px solid #f1f1f1;
    background: white;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #c8c2c2;
    .px2rem(font-size,24);
    dl{
        margin-top: 0;
        dt{
            
            .iconfont{
                font-family:"iconfont";
                .px2rem(font-size,50);
                font-style:normal;
                
            }
        }
        
    }
    dl:nth-child(2){
        dt{
            color: #ff5958;
        }
        dd{
            color: #ff5958;
        }
    }
}
@font-face {
  font-family: 'iconfont';  /* project id 382649 */
  src: url('//at.alicdn.com/t/font_382649_jyx5p6dk9yj02j4i.eot');
  src: url('//at.alicdn.com/t/font_382649_jyx5p6dk9yj02j4i.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_382649_jyx5p6dk9yj02j4i.woff') format('woff'),
  url('//at.alicdn.com/t/font_382649_jyx5p6dk9yj02j4i.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_382649_jyx5p6dk9yj02j4i.svg#iconfont') format('svg');
}